<template>
  <a-drawer
    class="bank-edit-drawer"
    title="题库配置"
    placement="right"
    width="40%"
    :closable="false"
    :visible="visible"
    @close="onClose"
    :bodyStyle="{ padding: 0, height: '100%' }"
  >
    <div class="operate-panel" :style="{ width: '100%', display: 'flex', flexDirection: 'row-reverse' }">
      <a-button type="primary" icon="edit" style="margin: 0 0.5rem" @click="handleModifyBtnClick"> 修改 </a-button>
      <a-input-search style="width: 270px" />
    </div>
    <div class="drawer-content" :style="{ marginTop: '2rem' }">
      <a-table
        :dataSource="questions"
        :columns="columns"
        :rowSelection="rowSelection"
        :rowKey="getTableRowKey"
        :customRow="customRow"
      >
        <span slot="name" slot-scope="name">{{ formatQuestionName(name) }}</span>
        <span slot="creator" slot-scope="creator">{{ formatCreatorName(creator) }}</span>
      </a-table>
    </div>
    <question-view-modal ref="viewModal" />
  </a-drawer>
</template>
<script>
import { getQuestionAll } from '../../../api/exam'
import { QUESTION_BANK_MUTATION } from '../../../store/mutation-types'
import { formatTextEllipsis, sleep } from '../../../utils/util'
import QuestionViewModal from '../modules/QuestionViewModal'

const usernameMap = {
  teacher: '小陈老师',
  admin: '小卫师傅',
}

export default {
  name: 'QuestionBankEditDrawer',
  components: { QuestionViewModal },
  props: {
    visible: { required: true, type: Boolean },
    bankId: { required: true, type: Number },
    onClose: { required: true, type: Function },
  },
  data: function () {
    return {
      questions: [],
      selected: [],
      bankInfo: {},
      loading: false,
    }
  },
  computed: {
    columns: function () {
      return [
        {
          dataIndex: 'name',
          key: 'name',
          title: '题干',
          // ellipsis: true,
          // width: 300,
          scopedSlots: { customRender: 'name' },
        },
        {
          dataIndex: 'score',
          key: 'score',
          title: '分数',
        },
        {
          dataIndex: 'creator',
          key: 'creator',
          title: '创建人',
          scopedSlots: { customRender: 'creator' },
        },
        {
          dataIndex: 'level',
          key: 'level',
          title: '难度',
        },
        {
          dataIndex: 'type',
          key: 'type',
          title: '题型',
        },
        {
          dataIndex: 'category',
          key: 'category',
          title: '学科',
        },
      ]
    },
    rowSelection: function () {
      return {
        selectedRowKeys: this.selected,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
      }
    },
    customRow: function () {
      return (record) => {
        return {
          on: { click: (e) => this.handleQuestionRowClick(record) },
        }
      }
    },
  },
  watch: {
    bankId: function (nextId, prevId) {
      if (nextId !== -1 && prevId === -1) {
        this.queryAllQuestions()
        this.queryBankInfo(nextId)
      }
    },
  },
  methods: {
    handleQuestionRowClick: function (row) {
      this.$refs.viewModal.edit(row)
    },
    handleModifyBtnClick: function () {
      sleep(
        500,
        () => {
          this.loading = true
        },
        () => {
          this.$store.commit(QUESTION_BANK_MUTATION.UPDATE_BANK, {
            bankId: this.bankId,
            updateBankInfo: {
              questionIds: this.selected,
            },
          })
          this.loading = false
          this.onClose()
        }
      )
    },
    queryAllQuestions: function () {
      getQuestionAll().then((res) => {
        if (res.code === 0) {
          this.questions = res.data
        } else {
          this.$notification.error({
            message: '获取全部问题的列表失败',
            description: res.msg,
          })
        }
      })
    },
    formatQuestionName: function (s) {
      return formatTextEllipsis(s, 20)
    },
    formatCreatorName: function (n) {
      return usernameMap[n]
    },
    getTableRowKey: function (row) {
      return row.id
    },
    onSelectChange: function (selectedRowKeys) {
      this.selected = selectedRowKeys
    },
    queryBankInfo: function (bankId) {
      this.bankInfo = this.$store.getters.queryBankById(bankId)
      this.selected = this.bankInfo.questionIds
    },
  },
}
</script>
<style scoped>
</style>